﻿@using LdCms.EF.DbModels
@using LdCms.Common.Extension
@using LdCms.Common.Utility
@using LdCms.Common.Enum
@model Ld_Extend_Advertisement
@{
    ViewData["Title"] = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<article class="page-container bg-eee" style="min-height:776px;">
    <div class="cl pd-20 bg-fff" style="min-height:736px;">
        <div class="tabBar cl clearfix">
            <span>基本信息</span>
        </div>
        <div class="mt-15">
            <form action="@Url.Action("Save",new { AdvertisementID = Model.AdvertisementID })" method="post" class="form form-horizontal" id="form-add">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>广告名称：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.Name" placeholder="请输入广告名称" id="fName" name="fName" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>广告内容：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <div id="picker" class="formControls" style="padding-left:0px;">选择文件</div>
                        <div id="filelist" class="ad-image-list">
                            @*<div class="form-content l">
                                    <p><img src="~/content/admin/temp/200x150.jpg" /></p>
                                    <p><input type="text" class="input-text" value="@Model.Name" placeholder="请输入广告名称" id="fName" name="fName" /></p>
                                    <p><textarea id="fRemark1" name="fRemark1" class="textarea" placeholder="说点什么...100个字符以内" dragonfly="true">@Model.Remark</textarea></p>
                                    <p>
                                        <a href="javascript:;" class="action center l"><i class="Hui-iconfont">&#xe6d4;</i>左移</a>
                                        <a href="javascript:;" class="action center l">右移<i class="Hui-iconfont">&#xe6d7;</i></a>
                                        <a href="javascript:;" class="action center l"><i class="Hui-iconfont">&#xe6a6;</i>删除</a>
                                    </p>
                                </div>*@
                        </div>

                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>排序：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.Sort" placeholder="请输入排序号，只能为数字。越小越靠前" id="fSort" name="fSort" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">备注：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <textarea id="fRemark" name="fRemark" class="textarea" placeholder="说点什么...100个字符以内" dragonfly="true">@Model.Remark</textarea>
                        <p class="textarea-numberbar"></p>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">审核：</label>
                    <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                        <div class="check-box">
                            <input type="checkbox" id="fState" name="fState" value="1" checked="checked" />
                            <label for="checkbox-1">&nbsp;</label>
                        </div>
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                        <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                    </div>
                </div>
            </form>
        </div>
    </div>
</article>
@*
    --------------
    页面底部JS脚本
    --------------
*@
@section css{
    <link href="~/content/admin/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
}
@section scripts{
    <!--请在下方写此页面业务相关的脚本-->
    <script type="text/javascript" src="~/content/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="~/content/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="~/content/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script type="text/javascript" src="~/content/admin/lib/webuploader/0.1.5/webuploader.min.js"></script>
    <script type="text/javascript">
        (function ($) {
            $.mainu = {
                init: function () {
                    $('.skin-minimal input').iCheck({
                        checkboxClass: 'icheckbox-blue',
                        radioClass: 'iradio-blue',
                        increaseArea: '20%'
                    });
                    $("#fRemark").Huitextarealength({
                        minlength: 4,
                        maxlength: 200
                    });
                    $.mainu.getAdvertisementDetails("@Model.AdvertisementID");
                },
                getAdvertisementDetails: function (id) {
                    var url = "@Url.Action("GetAdvertisementDetails")";
                    $.ajaxSetup({ cache: false });
                    $.get(url, { advertisementId: id }, function (result) {
                        var state = result.state;
                        var message = result.message;
                        var strOption = '';
                        if (state == "success") {
                            var list = result.data;
                            for (var i = 0; i < list.length; i++) {
                                strOption += '' +
                                    '<div id="details_' + list[i].id + '" class="form-content l">' +
                                    '    <p><img src="' + list[i].media_path + '" /></p>' +
                                    '    <p><input type="text" class="input-text" value="' + list[i].title + '" placeholder="广告描述" id="fDetailsTitle" name="fDetailsTitle" /></p>' +
                                    '    <p><textarea id="fDetailsUrl" name="fDetailsUrl" class="textarea" placeholder="广告链接网址" dragonfly="true">' + list[i].url + '</textarea></p>' +
                                    '    <p>' +
                                    '        <a href="javascript:;" class="action act-left center l"><i class="Hui-iconfont">&#xe6d4;</i>左移</a>' +
                                    '        <a href="javascript:;" class="action act-right center l">右移<i class="Hui-iconfont">&#xe6d7;</i></a>' +
                                    '        <a href="javascript:;" class="action act-del center l" onClick="$.mainu.deleteDetails(\'' + list[i].id + '\')"><i class="Hui-iconfont">&#xe6a6;</i>删除</a>' +
                                    '    </p>' +
                                    '    <p><input type="text" class="hide" id="fDetailsMediaId" name="fDetailsMediaId" value="' + list[i].media_id + '"/></p>' +
                                    '    <p><input type="text" class="hide" id="fDetailsMediaPath" name="fDetailsMediaPath" value="' + list[i].media_path + '"/></p>' +
                                    '</div>'
                            }

                        }
                        $("#filelist").html(strOption);
                    });
                },
                deleteDetails: function (id) {
                    $.ajax({
                        type: 'POST',
                        url: '@Url.Action("DeleteDetails")',
                        data: { DetailsId: id },
                        dataType: 'json',
                        success: function (result) {
                            var state = result.state;
                            var message = result.message;
                            if (state == "success") {
                                $("#details_" + id).remove();
                                layer.msg('已删除！', { icon: 1, time: 2000 });
                            } else {
                                layer.msg(message, { icon: 5, time: 3000 });
                            }
                        },
                        error: function (data) {
                            console.log(data.msg);
                        },
                    });
                },
                webUploaderInit: function () {
                    var uploader = WebUploader.create({
                        auto: true,
                        swf: '~/content/admin/lib/webuploader/0.1.5/Uploader.swf',
                        server: '@Url.Action("file", "upload")',
                        pick: {
                            id: '#picker',
                            multiple: true,
                        },
                        fileNumLimit: 9,
                        resize: false,
                        accept: {
                            title: 'Images',
                            extensions: 'gif,jpg,jpeg,bmp,png',
                            mimeTypes: 'image/*'
                        }
                    });
                    uploader.on('fileQueued', function (file) {
                        console.log(file);
                        $list = $("#filelist")
                        var $li = $(
                            '<div id="' + file.id + '" class="form-content l">' +
                            '    <p><img src="" /></p>' +
                            '    <p><input type="text" class="input-text" value="" placeholder="广告描述" id="fDetailsTitle" name="fDetailsTitle" /></p>' +
                            '    <p><textarea id="fDetailsUrl" name="fDetailsUrl" class="textarea" placeholder="广告链接网址" dragonfly="true"></textarea></p>' +
                            '    <p>' +
                            '        <a href="javascript:;" class="action act-left center l"><i class="Hui-iconfont">&#xe6d4;</i>左移</a>' +
                            '        <a href="javascript:;" class="action act-right center l">右移<i class="Hui-iconfont">&#xe6d7;</i></a>' +
                            '        <a href="javascript:;" class="action act-del center l"><i class="Hui-iconfont">&#xe6a6;</i>删除</a>' +
                            '    </p>' +
                            '    <p><input type="text" class="hide" id="fDetailsMediaId" name="fDetailsMediaId" /></p>' +
                            '    <p><input type="text" class="hide" id="fDetailsMediaPath" name="fDetailsMediaPath" /></p>' +
                            '</div>'
                        );
                        var $img = $li.find('img');
                        $list.prepend($li);
                        var thumbnailWidth = 100;
                        var thumbnailHeight = 100;
                        uploader.makeThumb(file, function (error, src) {
                            if (error) {
                                $img.replaceWith('<img width="100" height="100" src="~/content/admin/lib/webuploader/0.1.5/images/bg.png" />');
                                return;
                            }
                            $img.attr('src', src);
                        }, thumbnailWidth, thumbnailHeight);

                        $li.find(".act-del").on("click", function () {
                            console.log("a3");
                            cancelFile(file);
                            console.log("a5");
                        });


                    });
                    uploader.on('uploadProgress', function (file, percentage) {

                    });
                    uploader.on('uploadSuccess', function (file, json) {
                        var mediaid = json.data.file.mediaid;
                        var src = json.data.file.src;
                        $('#' + file.id).find("#fDetailsMediaId").val(mediaid);
                        $('#' + file.id).find("#fDetailsMediaPath").val(src);
                    });
                    uploader.on('uploadError', function (file, json) {
                        var message = "上传出错！";
                        layer.msg(message, { icon: 5 });
                    });
                    uploader.on('uploadComplete', function (file) {

                    });
                    function cancelFile(file) {
                        console.log("aa4");
                        uploader.cancelFile(file);
                        var $li = $('#' + file.id);
                        $li.off().find('.file-panel').off().end().remove();
                    };
                },
                formSubmit: function () {
                    $("#form-add").validate({
                        rules: {
                            fName: {
                                required: true
                            }
                        },
                        onkeyup: false,
                        focusCleanup: true,
                        success: "valid",
                        submitHandler: function (form) {
                            var fState = $("input[name='fState']").is(':checked');
                            var fGroupName = $("select[name='fGroupId']").find("option:selected").text();
                            $(form).ajaxSubmit({
                                type: "POST",
                                cache: false,
                                data: { fState: fState },
                                dataType: "json",
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    if (XMLHttpRequest.status != 200) {
                                        layer.alert("POST[FAIL]", { icon: 5 });
                                    }
                                },
                                success: function (result) {
                                    var state = result.state;          //错误代码
                                    var message = result.message;        //错误说明
                                    if (state == "success") {
                                        var index = parent.layer.getFrameIndex(window.name);
                                        parent.location.reload();
                                        parent.layer.close(index);
                                    } else {
                                        layer.alert(message, { icon: 5 });
                                    }
                                }
                            });
                        }
                    });
                }
            };
            $(function () {
                $.mainu.init();
                $.mainu.webUploaderInit();
                $.mainu.formSubmit();
            });
        })(jQuery);
    </script>
}
